<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="avalon.js" type="text/javascript"></script>
        <script>
            require("avalon.position,ready!", function(avalon) {
                var target = avalon(document.getElementById("son"))
                var parent = document.getElementById("parent")
                target.position({
                    at: "center",
                    my: "center",
                    of: parent
                })
                var model = avalon.define("vm", function(vm) {
                    vm.atTop = "top"
                    vm.atLeft = "left"
                    vm.myTop = "top"
                    vm.myLeft = "left"
                    vm.$watch("$all", function() {
                        target.position({
                            at: model.atLeft + " " + model.atTop,
                            my: model.myLeft + " " + model.myTop,
                            of: parent
                        })
                    })

                })
                avalon.scan()

            })


        </script>
        <style>
            #son{
                width:80px;
                height:20px;
                background: red;
                position:absolute;
            }
            #parent{
                position:absolute;
                top:200px;
                left:200px;
                width:300px;
                height:80px;
                background: green;
            }
        </style>
    </head>
    <body>



        <div id="parent">

        </div>
        <div id="son">

        </div>
        <h3>avalon的定位系统</h3>
        <div ms-controller="vm">
            <p>
               at: <select ms-duplex="atLeft">
                    <option>left</option>
                    <option>center</option>
                    <option>right</option>
                </select>
                <select ms-duplex="atTop">
                    <option>top</option>
                    <option>center</option>
                    <option>bottom</option>
                </select>决定小方块位置大方块的哪一个点上（四个角，四条边的中心，矩形中心）（可选，默认是left top）
            </p>
            <p>
              my:  <select ms-duplex="myLeft">
                    <option>left</option>
                    <option>center</option>
                    <option>right</option>
                </select>
                <select ms-duplex="myTop">
                    <option>top</option>
                    <option>center</option>
                    <option>bottom</option>
                </select>然后对这个点进行微调（可选，默认是left top）
            </p>
            <p>of:  document.getElementById("parent") ;(作为基准的大方块，必填项)</p>
        </div>
    </body>
</html>